<template>
	<view>
		<view class="goodBox2" v-if="showBox">
			<view class="goodTitle">
				<view class="titBox">
					<view class="title" v-if="data.deskNum">
						桌号{{data.deskNum}}
					</view>
					<view class="title" v-else>
						订单编号：{{data.no}}
					</view>
				</view>
				<view class="status" @click="showBox=false">
					收起
					<image class="titlIcon" src="../../static/images/icon/up.png"></image>
				</view>
			</view>
			<scroll-view class="scrollBox" scroll-y="true">
				<view class="goodLi" v-for="(item,index) in data.items" :key="index">
					<image class="goodLiImg" :src="item.picUrl"></image>
					<view class="goodInfoBox">
						<view class="goodTitleBox">
							<view class="goodTi">
								{{item.goodsName}}
							</view>
						</view>
						<view class="contIntro">
							规格：{{item.specsName}}
						</view>
						<view class="number">
							<view class="price2">
								<text style="font-size: 36rpx;">￥{{(item.price/100).toFixed(2)}}</text><text
									style="font-size: 20rpx;">/件</text>
							</view>
							<view class="priceNumber">
								*{{item.count}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="goodBox" v-else>
			<view class="goodTitle">
				<view class="titBox">
					<view class="title">
						订单编号：{{data.no}}
					</view>
				</view>
				<view class="status" @click="showBox=true">
					展开
					<image class="titlIcon" src="../../static/images/icon/down.png"></image>
				</view>
			</view>
			<!-- <view class="orderCode">
				订单编号：222222222222222222
			</view> -->
			<view class="socr">
				<u-scroll-list :indicator='false'>
					<view v-for="(item, index) in data.items" :key="index">
						<image :class="index!=0?'scrollImg marginL':'scrollImg'" :src="item.picUrl"></image>
					</view>
				</u-scroll-list>
			</view>
			<view class="goodInfo">
				<view class="time">
					{{parseTime(data.createTime)}}
				</view>
				<view class="priceBox">
					<text style="font-size: 20rpx;color: #999999;">共 <text
							style="color: #333333;">{{data.productCount}}</text>
						件商品</text><text style="font-size: 20rpx;margin-left: 10rpx;">￥</text><text
						style="font-size: 36rpx;">{{(data.payPrice/100).toFixed(2)}}</text>
				</view>
			</view>
		</view>
		<!-- <view class="step">
			<u-steps current="0">
				<u-steps-item title="待商家确认">
				</u-steps-item>
				<u-steps-item title="待退款"></u-steps-item>
				<u-steps-item title="已完成"></u-steps-item>
			</u-steps>
		</view> -->
		<view class="mianBox">
			<view class="box">
				<view class="title2" v-if="orderType!==1">
					售后类型
				</view>
				<view class="radioBox" v-if="orderType!==1">
					<u-radio-group v-model="model1.type" placement="column">
						<u-radio activeColor="#ff592b" labelSize="24rpx"
							:customStyle="{marginTop: '25rpx',marginLeft:'10rpx'}" v-for="(item, index) in radiolist1"
							:key="index" :label="item.name" :name="item.value" @change="groupChange">
						</u-radio>
					</u-radio-group>
				</view>
				<view class="inforBox">
					<view class="priceTitlt">
						退款金额
					</view>
					<view class="price">
						￥{{(data.payPrice/100).toFixed(2)}}
					</view>
				</view>
				<!-- <view class="inforBox">
					<view class="priceTitlt">
						退还瓶数
					</view>
					<view class="price">
						<view class="priceTxt">
							{{data.count}}瓶
						</view>
					</view>
				</view> -->
				<view class="inforBox" @click="showPopEmit">
					<view class="priceTitlt">
						申请原因
					</view>
					<view class="price">
						<view class="priceTxt">
							{{reduceTxt}}
						</view>
						<image class="arrow" src="../../static/images/minde/arrow.png"></image>
					</view>
				</view>
				<view class="inforBox2">
					<view class="priceTitlt">
						相关描述
					</view>
				</view>
				<view class="bigBox">
					<textarea v-model="value1" placeholder="请描述您的问题，建议上传照片" class="uText"></textarea>
					<view class="imageBox">
						<u-scroll-list :indicator='false'>
							<view>
								<image class="checkImage" src="../../static/other/check.png" @click="checkImg"></image>
							</view>
							<view style="position: relative;" v-for="(item, index) in list" :key="index">
								<image class="scrollImg" :src="item" @click="bigImg(item)"></image>
								<image src="../../static/images/icon/del.png" class="colse" @click="colse(index)">
								</image>
							</view>
						</u-scroll-list>
					</view>
				</view>
				<view class="but" @click="enterSmit">
					提交
				</view>
			</view>
		</view>
		<u-popup :show="showPop" :round="10" mode="bottom" @close="close" @open="open">
			<view class="popBox">
				<view class="popTitle">
					申请原因
				</view>
				<view class="checkBox">
					<u-radio-group v-model="reduceType" placement="column" iconPlacement="right">
						<u-radio activeColor="#ff592b" labelSize="24rpx"
							:customStyle="{marginTop: '25rpx',marginLeft:'10rpx'}" v-for="(item, index) in radiolist2"
							:key="index" :label="item.name" :name="item.value" @change="groupChange2">
						</u-radio>
					</u-radio-group>
				</view>
				<view class="but" @click="showPop=false">
					确定
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getDetails,
		afterSale
	} from "@/api/wine/wine.js"
	import {
		uploadXpPath
	} from "@/api/merchants/merchants.js"
	import {
		parseTime
	} from "@/utils/ruoyi"
	export default {
		data() {
			return {
				orderType:0,
				id: '', //商品id
				data: {},
				showBox: false,
				showPop: false,
				radiolist1: [{
						name: '仅退款',
						value: '1',
					},
					// {
					// 	name: '退货退款',
					// 	value: '2',
					// },
				],
				radiolist2: [{
						name: '不想要了',
						value: '1',
					},
					{
						name: '质量问题',
						value: '2',
					},
				],
				model1: {
					type: "1"
				},
				value1: '',
				reduceType: '1',
				list: [], //退款申请的图片
				reduceTxt:'请选择',//退款选择的申请的原因
			}
		},
		onLoad(e) {
			this.id = e.id
			if(e.type){
				this.orderType = e.type
			}
			this.getData()
		},
		methods: {
			// 点击放大图片
			bigImg(url){
				if (!url) return
				uni.previewImage({
					urls: [url]
				})
			},
			//选择图片
			checkImg(){
				let that=this
				uni.chooseMedia({
				  count: 1,
				  mediaType: ['image'],
				  sourceType: ['album', 'camera'],
				  maxDuration: 30,
				  camera: 'back',
				  success(res) {
					let data = {
						filePath: res.tempFiles[0].tempFilePath
					}
					uni.showLoading({
						title:'加载中',
						mask:true
					})
					uploadXpPath(data).then(response => {
						uni.hideLoading()
						that.list.push(response.data)
					})
				  }
				})
			},
			//提交售后申请
			enterSmit() {
				let that = this
				let reduceWay = ''
				if(that.model1.type==1){
					reduceWay = 10
				}else if(that.model1.type==2){
					reduceWay = 20
				}
				if(that.reduceTxt == '请选择'){
					uni.$u.toast('请选择退款原因')
					return false
				}
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				let data = {
					orderId: that.id,
					way: reduceWay,
					refundPrice: that.data.payPrice,
					applyReason: that.reduceTxt,
					applyDescription: that.value1,
					applyPicUrls: that.list
				}
				// console.log('退款参数',data)
				afterSale(data).then(response => {
					uni.hideLoading()
					if(response.code==0){
						uni.$u.toast('退款申请提交成功')
						that.$tab.navigateBack(1)
					}
				})
			},
			getData() {
				let that = this
				let data = {
					id: that.id,
					sync: ''
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getDetails(data).then(response => {
					uni.hideLoading()
					that.data = response.data
					if (that.data.status == 10) {
						that.radiolist1 = [{
							name: '仅退款',
							value: '1',
						}, ]
					}
				})
			},
			open() {
				// console.log('open');
			},
			close() {
				this.showPop = false
				// console.log('close');
			},
			showPopEmit(){
				this.showPop = true
				// this.reduceType = ''
				if(this.reduceType = ''){
					this.reduceTxt = this.radiolist2[0].name
				}
			},
			groupChange(n) {
				console.log('groupChange', n);
				this.model1.type = n
			},
			groupChange2(n) {
				// console.log('groupChange2', n);
				this.reduceType = n
				this.reduceTxt = this.radiolist2[n-1].name
			},
			colse(e) {
				// console.log(e)
				this.list.splice(e, 1)
			},
			//时间处理
			parseTime(time) {
				return parseTime(time)
			},
		}
	}
</script>

<style>
	/* 复制过来的 */
	.goodBox {
		width: 690rpx;
		/* height: 440rpx; */
		margin: 30rpx auto;
		padding: 30rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
	}

	.goodBox2 {
		width: 690rpx;
		/* max-height: 530rpx; */
		margin: 30rpx auto;
		padding: 30rpx 30rpx 0 30rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
	}

	.scrollBox {
		width: 630rpx;
		max-height: 460rpx;
		/* background-color: red; */
	}

	.goodTitle {
		width: 630rpx;
		height: 50rpx;
		line-height: 50rpx;
		display: flex;
		justify-content: space-between;
	}

	.titBox {
		width: 500rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
	}

	.status {
		width: 100rpx;
		height: 50rpx;
		font-size: 24rpx;
		color: #999999;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.title {
		max-width: 450rpx;
		height: 50rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.titlIcon {
		width: 20rpx;
		height: 20rpx;
		margin: -8rpx 0 0 20rpx;
	}

	.orderCode {
		width: 630rpx;
		height: 30rpx;
		line-height: 20rpx;
		font-size: 20rpx;
		color: #999999;
		margin: 10rpx 0;
	}

	.socr {
		width: 630rpx;
		height: 180rpx;
		overflow: hidden;
	}

	.scrollImg {
		width: 156rpx;
		height: 156rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.marginL {
		margin-left: 12rpx;
	}

	.goodInfo {
		width: 630rpx;
		height: 50rpx;
		line-height: 50rpx;
		display: flex;
		justify-content: space-between;
	}

	.time {
		width: 250rpx;
		height: 50rpx;
		font-size: 20rpx;
		color: #999999;
	}

	.priceBox {
		width: 350rpx;
		height: 50rpx;
		text-align: end;
	}

	.goodLi {
		width: 630rpx;
		height: 180rpx;
		margin: 30rpx auto;
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #F1F1F1;
	}

	.goodLi:last-child {
		border: none;
	}

	.goodLiImg {
		width: 156rpx;
		height: 156rpx;
		border-radius: 20rpx;
	}

	.goodInfoBox {
		width: 450rpx;
		height: 150rpx;
		overflow: hidden;
	}

	.goodTitleBox {
		width: 450rpx;
		height: 50rpx;
		line-height: 40rpx;
		display: flex;
		justify-content: space-between;
	}

	.goodTi {
		width: 600rpx;
		height: 50rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.stutas {
		width: 100rpx;
		height: 50rpx;
		text-align: end;
		font-size: 20rpx;
		color: #F16645;
	}

	.contIntro {
		width: 450rpx;
		height: 60rpx;
		line-height: 30rpx;
		font-size: 24rpx;
		color: #999999;
		display: -webkit-box;
		/* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
		-webkit-box-orient: vertical;
		/* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
		text-overflow: ellipsis;
		/* 可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.number {
		width: 450rpx;
		height: 40rpx;
		color: #999999;
		display: flex;
		justify-content: space-between;
	}

	.price2 {
		width: 300rpx;
		height: 40rpx;
		line-height: 40rpx;
	}

	.priceNumber {
		width: 100rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: end;
		font-size: 24rpx;
		color: #999999;
	}

	/* 复制过来的 */
	.mianBox {
		width: 750rpx;
		/* height: 200rpx; */
		padding-bottom: 60rpx;
		background-color: #fff;
		overflow: hidden;
	}

	.box {
		width: 690rpx;
		/* height: 180rpx; */
		margin: 30rpx auto 0 auto;
	}

	.title2 {
		width: 690rpx;
		height: 34rpx;
		line-height: 34rpx;
		font-weight: bold;
		font-size: 24rpx;
		color: #333333;
	}

	.radioBox {
		width: 690rpx;
		height: 150rpx;
		border-bottom: 1rpx solid #F1F1F1;
	}

	.inforBox {
		width: 690rpx;
		height: 94rpx;
		line-height: 94rpx;
		font-size: 24rpx;
		color: #333333;
		border-bottom: 1rpx solid #F1F1F1;
		display: flex;
		justify-content: space-between;
	}

	.inforBox2 {
		width: 690rpx;
		height: 94rpx;
		line-height: 94rpx;
		font-size: 24rpx;
		color: #333333;
	}

	.priceTitlt {
		width: 150rpx;
		height: 94rpx;
	}

	.price {
		width: 150rpx;
		height: 94rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.priceTxt {
		color: #999999;
	}

	.arrow {
		width: 15rpx;
		height: 24rpx;
		margin-left: 10rpx;
	}

	.bigBox {
		width: 690rpx;
		min-height: 400rpx;
		background: #F5F5F5;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.uText {
		width: 690rpx;
		height: 230rpx;
		padding: 30rpx;
		border: none;
		background-color: #F5F5F5;
	}

	.imageBox {
		width: 630rpx;
		height: 136rpx;
		margin: 0 auto;
	}

	.checkImage {
		width: 164rpx;
		height: 136rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.scrollImg {
		width: 164rpx;
		height: 136rpx;
		border-radius: 20rpx;
		overflow: hidden;
		margin-left: 12rpx;
	}

	.colse {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		top: 0rpx;
		right: -5rpx;
	}

	.but {
		width: 690rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #E84E22;
		border-radius: 32rpx;
		margin-top: 60rpx;
		text-align: center;
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.step {
		width: 750rpx;
		height: 170rpx;
		background-color: #FFFFFF;
		margin: 20rpx 0;
		display: flex;
		align-items: center;
	}

	.popBox {
		width: 690rpx;
		height: 300rpx;
		margin: 0 auto;
	}

	.popTitle {
		width: 690rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		margin-top: 30rpx;
	}

	.checkBox {
		width: 690rpx;
		height: 100rpx;
	}
</style>